import React, { useState } from 'react'
import './app.scss'
const App = function () {
    // 总数据
    const [num,setNum] = useState('')
    const [zong] = useState([
        {
            name: 'hook语法',
            text: 'const[value,setValue] = useState(default)'
        },
        {
            name: 'hook定义',
            text: '让函数组件拥有和类组件一样的状态'
        },
        {
            name: 'useEffect',
            text: '让函数组件拥有class组件的全部'
        },
        {
            name: 'useState',
            text: '让函数组件拥有修改state的能力'
        },
        {
            name: 'useEffect',
            text: '集合componentDidMount,componentDidUpdate,componentWillMount,shouldComponentUpdate'
        },
    ])
    const [text, setText] = useState()
    // const lis = document.getElementsByClassName('lis')
    const change = (index) => {
    //     for (let i = 0; i < lis.length; i++) {
    //         lis[i].style.background = 'white'
    //         lis[i].style.color = 'black'
    //         console.log()
    //     }
    //     lis[index].style.background = 'red'
    //     lis[index].style.color = 'white '
        const _index = index
        setNum(_index)
        const _text = [...zong]
        _text[index].text = zong[index].text
        setText(_text[index].text)
    }
    return <div className='box'>
        <div className='left'>
            <ul>
                {
                    zong.map((item, index) => {
                        return <li key={index} onClick={() => change(index)} className='lis' style={num===index ? {background:'red',color:'white'}:{background:'white',color:'black'}}>
                            {item.name}
                        </li>
                    })
                }
            </ul>
        </div>
        <div className='right'>
            {text}
        </div>
    </div>
}

export default App